<template>
    <!-- 私有自定义指令 -->
    <h3>私有自定义指令</h3>
    <div v-color="'red'">这里的文字绑定指令</div>
    <div v-font-size="fontSize">通过指令修改字号</div>
    调整字号：<input type="number" v-model="fontSize"/>
    <!-- 全局自定义指令使用 -->
    <div v-background-color="'green'">全局自定义指令</div>
</template>
<script setup>
import { ref } from 'vue'
// const vColor = {
//     // el是绑定了这个指令的元素DOM对象
//     // 挂载完成后即修改元素样式
//     mounted: (el) => {
//         el.style.color = 'red'
//     }
// }
// 指令的函数简写形式
const vColor = (el, binding) => {
    // console.log(binding)
    // 所有指令的声明周期都做这个动作
    el.style.color = binding.value
}
const fontSize = ref(16)
const vFontSize = {
    // 挂载完成后，第一次看到
    // binding封装的是指令=后面的数据
    mounted: (el, binding) => {
        el.style.fontSize = binding.value + 'px'
    },
    // 组件更新后，指令=后面的绑定的数据变化了
    updated: (el, binding) => {
        console.log('更新了吗')
        console.log(binding.value)
        el.style.fontSize = binding.value + 'px'
    },
}
</script>
<style scoped>
    
</style>